<template>
    <!-- 贷后管理>逾期管理 -->
    <div class="postloanaview">
    
        <div class="div">
            <el-select v-model="value" class="m-2" placeholder="企业管理">
            <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="input">
            <el-icon>
                <Search />
            </el-icon>
            <input v-model="input" placeholder="Please input" class="inputs" />
        </div>
        <el-select v-model="value" class="m-2" placeholder="企业类型">
            <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="caozuo">
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
        </div>
        </div>
     
       
       
    </div>
     <!-- 表格部分 -->
    <div class="table">
        <el-table :data="tableData" style="width: 100%" :fit="true">
        <el-table-column prop="date" label="序号"></el-table-column>
        <el-table-column prop="date" label="ABC有限公司" width="180"></el-table-column>
        <el-table-column prop="name" label="企业名称"></el-table-column> 
        <el-table-column prop="address" label="社会信用代码"></el-table-column>
        <el-table-column prop="address" label="借款金额"></el-table-column>
        <el-table-column prop="address" label="期限"></el-table-column>
        <el-table-column prop="address" label="已还本金"></el-table-column>
        <el-table-column prop="address" label="应还利息"></el-table-column>
        <el-table-column prop="address" label="已还利息"></el-table-column>
        <el-table-column prop="address" label="手续费"></el-table-column>
        <el-table-column prop="address" label="放款方式"></el-table-column>
        <el-table-column prop="address" label="还款状态"></el-table-column>
        <el-table-column prop="pos" label="操作" @click="change()">
            <div class="tubiao">
                <span @click="biaoge"><el-icon><CirclePlus /></el-icon></span>
                <span @click="biaoge2"><el-icon><Tickets /></el-icon></span>
                <span text @click="open"><el-icon><Platform /></el-icon></span>
               
            </div>
        </el-table-column>  
    </el-table>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';

//弹框
import { markRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'

var router = useRouter();


var flag = ref(false)
var xlxllist = [
    {
        value: '企业管理1',
        label: '企业管理',
    },
]


const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189',
  },
]
// const change=()=>{
//     flag=true
// }
const biaoge=()=>{
    router.push('/home/postloan/postloanbone')
}
const biaoge2=()=>{
    router.push('/home/postloan/postloanbtwo')
}

// 弹框内容
const open = () => {
  ElMessageBox.confirm(
    '是否确认要提交资产保全申请',
  
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      center: true,
    }
  )
}
</script>

<style scoped>
.postloanaview .div {
    display: flex;
    justify-content: space-between;
    width: 55%;
    padding: 20px
}

.title {
    width: 200px;
    height: 40px;
    background-color: aqua;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 30px;

}
.m-2{
    width: 140px;
}
.postloanaview .input {
    width: 300px;
    height: 30px;
    border: 1px solid #e5e7ec;
    display: flex;
    align-items: center;
    justify-content: space-around;


}

.postloanaview .inputs {
    width: 260px;
    height: 28px;
    border: none;
}
.tubiao {
    width: 100px;
    height: 40px;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #4ba7fe;
    margin: auto;
}
.tubiao span{
    font-size: 20px;
    display: none;
}
.tubiao:hover span{
    display: block;
}
</style>